<template>
<div>
  <i-card class="margin-bottom-10" dis-hover>
    <p slot="title">按条件搜索</p>
    <router-link :to="{path: '/admin/lessons/new'}" slot="extra">
      <i-icon type="ios-plus"></i-icon>
      <span>添加课程</span>
    </router-link>
    <i-form @submit.native.prevent="search()">
      <filters @changed="filterChanged"></filters>
      <div class="filter-item">
        <span>类型</span>
        <div>
          <i-tag v-for="courseType in courseTypes" v-bind:class="{'ivu-tag-blue': query.courseType == courseType.index}"
            :key="'course_type_' + courseType.index" @click.native="setCourseType(courseType.index)">{{courseType.name}}</i-tag>
        </div>
      </div>
      <div class="filter-item">
        <span>其它信息</span>
        <div class="filter-item-input">
          <i-row :gutter="10" type="flex" justify="start">
            <i-col :span="10"><i-input placeholder="作者工号" v-model="query.author"></i-input></i-col>
            <i-col :span="14">
              <i-input placeholder="课程名称" v-model="query.keyword">
                <i-button type="primary" html-type="submit" slot="append" icon="ios-search">搜索</i-button>
              </i-input>
            </i-col>
          </i-row>
        </div>
      </div>
    </i-form>
  </i-card>
  <div class="clearfix margin-bottom-10">
    <i-page :total="totalLessons" :page-size="20" :current="query.page" size="small" @on-change="search" show-total class="pull-right" show-elevator></i-page>
  </div>
  <i-table :columns="columns" :data="lessons" class="margin-bottom-10"></i-table>
  <div class="clearfix">
    <i-page :total="totalLessons" :page-size="20" :current="query.page" size="small" @on-change="search" show-total class="pull-right" show-elevator></i-page>
  </div>
</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Filters from '../components/filters'
import GradeSpan from '../components/data-span/Grade'
import SubjectSpan from '../components/data-span/Subject'
export default {
  data() {
    let that = this
    return {
      courseTypes: [
        { name: '不限', index: null },
        { name: '校内课程', index: 0 },
        { name: '新闻动态', index: 1 }
      ],
      query: {
        grade: null,
        edition: null,
        subject: null,
        keyword: null,
        courseType: null,
        page: 1,
        author: null
      },
      current: 1,
      columns: [
        {
          title: '创建时间',
          key: 'createdAt',
          width: 100
        },
        {
          title: '课程名称',
          key: 'title',
          render(h, params) {
            return h(
              'div',
              {
                attrs: {
                  class: 'item-title'
                }
              },
              [
                h('p', [
                  h('span', '['),
                  h(GradeSpan, {
                    props: {
                      index: params.row.grade
                    }
                  }),
                  h(SubjectSpan, {
                    props: {
                      index: params.row.subject
                    }
                  }),
                  h('span', ']'),
                  h(
                    'router-link',
                    {
                      props: {
                        to: {
                          path: '/courses/' + params.row.id
                        }
                      },
                      attrs: {
                        target: '_blank'
                      }
                    },
                    this.row.title
                  )
                ]),
                h(
                  'div',
                  Array.apply(null, this.row.tags).map(function(tag) {
                    return h('i-tag', tag)
                  })
                )
              ]
            )
          }
        },
        {
          width: 180,
          renderHeader(h, params) {
            return h('div', [
              h('p', '作者'),
              h('p', '收藏数 / 推荐数 / 浏览数')
            ])
          },
          render(h, params) {
            return h('div', [
              h(
                'p',
                params.row.createdBy.code + ' / ' + params.row.createdBy.name
              ),
              h(
                'p',
                {
                  attrs: {
                    title:
                      '共 ' +
                      params.row.favored +
                      ' 次收藏 / ' +
                      params.row.recommended +
                      ' 次推荐 / ' +
                      params.row.viewed +
                      ' 次浏览 '
                  }
                },
                params.row.favored +
                  ' / ' +
                  params.row.recommended +
                  ' / ' +
                  params.row.viewed
              )
            ])
          }
        },
        {
          key: 'attachmentsEnableToDownload',
          width: 120,
          renderHeader(h, params) {
            return h('div', [h('p', '状态'), h('p', '附件允许下载')])
          },
          render(h, params) {
            return h('div', [
              h('p', params.row.statusText),
              h(
                'p',
                params.row.attachmentsEnableToDownload === true
                  ? '允许下载'
                  : '不允许下载'
              )
            ])
          }
        },
        {
          title: '操作',
          width: 180,
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h(
                'i-button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.updateSticky({
                        model: {
                          id: params.row.id,
                          sticky: !params.row.sticky
                        },
                        callback() {
                          that.$Notice.success({
                            title: '课程管理',
                            desc: params.row.sticky
                              ? '取消推荐成功'
                              : '推荐课程成功'
                          })
                          that.search()
                        }
                      })
                    }
                  }
                },
                params.row.sticky ? '取消推荐' : '推荐到首页'
              ),
              h(
                'i-button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.$router.push({
                        path: '/admin/lessons/' + params.row.id + '/comments'
                      })
                    }
                  }
                },
                '管理评论'
              ),
              h('br'),
              h(
                'i-button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.$router.push({
                        name: 'lessons_edit',
                        params: { id: params.row.id }
                      })
                    }
                  }
                },
                '编辑'
              ),
              h(
                'i-button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.$Modal.confirm({
                        title: '确认',
                        content: '确认删除课程【' + params.row.title + '】吗？',
                        okText: '确定',
                        cancelText: '取消',
                        loading: true,
                        onOk: () => {
                          that.removeLesson({
                            id: params.row.id,
                            callback() {
                              that.$Modal.remove()
                              that.$Notice.success({
                                title: '课程管理',
                                desc: '删除课程成功'
                              })
                              that.search()
                            }
                          })
                        }
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ]
    }
  },
  components: {
    Filters,
    GradeSpan,
    SubjectSpan
  },
  computed: {
    ...mapGetters({
      totalLessons: 'totalLessons',
      lessons: 'lessons'
    })
  },
  methods: {
    ...mapActions({
      searchLessons: 'searchLessons',
      updateSticky: 'updateSticky',
      removeLesson: 'removeLesson'
    }),
    search(page) {
      this.query.page = page || 1
      this.searchLessons(this.query)
    },
    setCourseType(val) {
      this.query.courseType = val
      this.search()
    },
    filterChanged(data) {
      this.query.grade = data.grade
      this.query.subject = data.subject
      this.query.edition = data.edition

      this.search()
    }
  },
  mounted() {
    this.search()
  },
  activated() {
    this.search()
  }
}
</script>

<style lang="less" scoped>
</style>
